<template>
  <el-container>
    <el-header style="background-color:#303848">
      <el-row style="height: 100%">
        <el-col :span="3">
          <h2 style="color:#fff">NIUSHOP</h2>
        </el-col>
        <el-col :span="19">
          <el-menu mode="horizontal" router background-color="#303848" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/goods/list">商品</el-menu-item>
            <el-menu-item index="/order/list">订单</el-menu-item>
            <el-menu-item index="/vip/list">会员</el-menu-item>
            <el-menu-item >营销</el-menu-item>
            <el-menu-item >小程序</el-menu-item>
            <el-menu-item >店铺</el-menu-item>
            <el-menu-item >财务</el-menu-item>
            <el-menu-item >数据</el-menu-item>
            <el-menu-item >设置</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="2" style="display:flex; align-items:center">
          <el-avatar size="medium" shape="circle" style="margin-right:8px"
          src="https://wx1.sinaimg.cn/square/005PoTRhly8gbp4a7zcr1j30ig0ig3z8.jpg">
          </el-avatar>
          <el-dropdown style="cursor:pointer">
            <span class="el-dropdown-link" style="color:#fff">
              杨开轩<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  icon="el-icon-house">首页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-help">清理缓存</el-dropdown-item>
              <el-dropdown-item icon="el-icon-star-off">加入收藏</el-dropdown-item>
              <el-dropdown-item class="drop">
                <span>退出登录</span>
                <i class="el-icon-switch-button"></i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-main><router-view></router-view></el-main>
  </el-container>
</template>
<script>
export default {

}
</script>

<style scoped>
  .el-menu-item{
    padding: 0 30px;
    font-weight: bold;
  }
  .drop{
    width:120px;
    display:flex; 
    justify-content:space-between; 
    align-items: center;
  }
  .el-col{
    height: 100%;
  }
  
</style>